<template>
	<view class="detail-container" :class="{ 'safe-area': isIphoneX }" :data-theme="themeStyle">
		<!-- 导航栏 -->
		<!-- #ifdef H5 -->
		<view class="head-nav ns-bg-color"></view>
		<!-- #endif -->
		<!-- #ifndef H5 -->
		<view class="head-nav ns-bg-color" :class="{ active: isIphoneX }"></view>
		<!-- #endif -->
		<view class="head-return ns-bg-color" @click="navigateBack()">
			<text class="iconfont iconback_light"></text>
			{{ $lang('title') }}
		</view>
		<!-- 订单状态 -->
		<view class="status-wrap ns-bg-color">
			<view class="order-status-left">
				<image v-if="orderData.order_status == 0" :src="$util.img('/upload/uniapp/order/order-icon.png')" mode=""></image>
				<image v-if="orderData.order_status == 1" :src="$util.img('/upload/uniapp/order/order-icon-received.png')" mode=""></image>
				<image v-if="orderData.order_status == -1" :src="$util.img('/upload/uniapp/order/order-icon-close.png')" mode=""></image>
				<view class="status-name">
					<view class="status-name">
						{{ orderData.order_status == 0 ? '待支付' : orderData.order_status == 1 ? '已完成' : orderData.order_status == -1 ? '已关闭' : '' }}
					</view>
					<view class="status-name">{{ orderData.type_name }}</view>
				</view>
			</view>
		</view>

		<!-- 地址信息 -->
		<view class="address-wrap" v-if="orderData.delivery_type != 'store'">
			<view class="icon"><view class="iconfont iconlocation"></view></view>
			<view class="address-info">
				<view class="info">
					<text>{{ orderData.name }}&nbsp;{{ orderData.mobile }}</text>
				</view>
				<view class="detail" v-if="orderData.full_address || orderData.address">
					<text>收货地址：{{ orderData.full_address }} {{ orderData.address }}</text>
				</view>
			</view>
		</view>
		
		<!-- 门店信息 -->
		<view class="store-wrap" v-if="orderData.delivery_type == 'store'">
			<view>
				<view class="store-info" v-if="orderData.delivery_store_info">
					<view class="icon ns-bg-color" v-if="!storeDetail.store_image"><view class="iconfont iconmendian"></view></view>
					<view class="icon image-icon" v-else><image :src="$util.img(storeDetail.store_image)" mode="aspectFill"></image></view>
					<view class="store-info-detail">
						<view>
							{{ storeDetail.delivery_store_name }}
						</view>
						<view class="detail store-detail">
							<view class="ns-text-color-gray" v-if="storeDetail.open_date">营业时间：{{ storeDetail.open_date }}</view>
							<view class="ns-text-color-gray">地址：{{ storeDetail.full_address }}</view>
						</view>
					</view>
				</view>
				<view v-else>
					<view class="address-empty">
						<view class="ns-text-color">当前无自提门店</view>
					</view>
				</view>
			</view>
			<view class="pick-block first-pick-block">
				<view>预留手机</view>
				<input type="number" disabled  :value="orderData.mobile" />
			</view>
			<!-- <view class="pick-block">
				<view>联系方式</view>
				<input type="number" disabled  :value="storeDetail.telphone" />
			</view> -->
		</view>
		
		<!-- <view class="pickup-info" v-if="orderData.order_status && orderData.delivery_type == 'store'">
			<view class="pickup-point-info">
				<view class="name">
					<text class="ns-font-size-lg">{{ orderData.delivery_store_name }}</text>
					<text class="mark ns-text-color ns-border-color">自提点</text>
				</view>
				<block v-if="orderData.delivery_store_info">
					<view class="address">
						<text class="iconfont icondizhi"></text>
						详细地址：{{ storeDetail.full_address }}
					</view>
					<view class="time">
						<text class="iconfont iconshijian"></text>
						营业时间：{{ orderData.delivery_store_info.open_date }}
					</view>
					<view class="contact">
						<text class="iconfont icondianhua1"></text>
						联系方式：{{ orderData.delivery_store_info.telphone }}
					</view>
				</block>
			</view>
			<view class="hr"></view>
			<view class="pickup-code-info">
				<view class="info">
					<text>
						<text class="ns-text-color-gray">提货码：</text>
						{{ orderData.delivery_code }}
					</text>
				</view>
				<view class="code"><image :src="$util.img(orderData.pickup)" mode=""></image></view>
			</view>
		</view> -->

		<!-- 店铺 -->
		<view class="site-wrap">
			<view class="site-body">
				<view class="goods-wrap">
					<view @click='goDetail(orderData.exchange_id)' class="goods-img">
						<image :src="$util.img(orderData.exchange_image)" @error="imageError(goodsIndex)" mode="aspectFill"></image>
					</view>
					<view class="goods-info">
						<view @click='goDetail(orderData.exchange_id)' class="goods-name">{{ orderData.exchange_name }}</view>
						<view class="goods-sub-section">
							<view>
								<text class="goods-price ns-text-color">
									<text>
										<text>{{ orderData.point }}积分</text>
										<text v-if="orderData.price > 0">
											+
											<text class="unit">{{ $lang('common.currencySymbol') }}</text>
											{{ orderData.price }}
										</text>
									</text>
								</text>
							</view>
							<view>
								<text>
									<text class="iconfont iconclose"></text>
									{{ orderData.num }}
								</text>
							</view>
						</view>
						<view class="goods-operation">
							<block v-if="orderData.is_enable_refund">
								<view hover-class="none" @click="goRefund(orderData.order_goods_id)" v-if="orderData.refund_status == 0">
									<view class="order-box-btn">退款</view>
								</view>
								<view @click="goRefundDetail(orderData.order_goods_id)" v-else>
									<view class="order-box-btn">查看退款</view>
								</view>
							</block>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 订单概况 -->
		<view class="order-summary">
			<view class="order-cell">
				<text class="tit">订单编号：</text>
				<view class="box">
					<text class="ns-text-color-black">{{ orderData.order_no }}</text>
					<view class="copy" @click="$util.copy(orderData.order_no)">复制</view>
				</view>
			</view>
			<view class="order-cell">
				<text class="tit">订单交易号：</text>
				<view class="box">
					<text class="ns-text-color-black">{{ orderData.out_trade_no }}</text>
				</view>
			</view>
			<view class="order-cell">
				<text class="tit">创建时间：</text>
				<view class="box">
					<text class="ns-text-color-black">{{ $util.timeStampTurnTime(orderData.create_time) }}</text>
				</view>
			</view>
			<view class="order-cell" v-if="orderData.close_time > 0">
				<text class="tit">关闭时间：</text>
				<view class="box">
					<text class="ns-text-color-black">{{ $util.timeStampTurnTime(orderData.close_time) }}</text>
				</view>
			</view>
			<view class="hr"></view>
			<view class="order-cell" v-if="orderData.delivery_type_name">
				<text class="tit">配送方式：</text>
				<view class="box">
					<text class="ns-text-color-black">{{ orderData.delivery_type_name }}</text>
					<view v-if="orderData.relate_order_id > 0" class="copy" @click="$util.redirectTo('/pages/order/detail/detail',{'order_id':orderData.relate_order_id})">查看</view>
				</view>
			</view>
			<!-- 联系客服 -->
			<view class="kefu">
				<!-- #ifdef MP-WEIXIN -->
				<button type="default" hover-class="none" open-type="contact"></button>
				<!-- #endif -->
				<view>
					<text class="iconfont iconziyuan"></text>
					<text>联系客服</text>
				</view>
			</view>
		</view>

		<!-- 订单金额 -->
		<view class="order-money">
			<view class="order-cell" v-if="orderData.point > 0">
				<text class="tit">使用积分</text>
				<view class="box align-right">
					<text class="ns-text-color">
						<text>{{ orderData.point }}</text>
					</text>
				</view>
			</view>
			<view class="order-cell" v-if="orderData.price > 0">
				<text class="tit">使用金额</text>
				<view class="box align-right">
					<text class="ns-text-color">
						<text class="ns-font-size-sm">{{ $lang('common.currencySymbol') }}</text>
						<text>{{ orderData.price }}</text>
					</text>
				</view>
			</view>
			<view class="order-cell">
				<view class="box align-right">
					<text>应付款：</text>
					<text class="ns-text-color">
						<text class="ns-font-size-sm">{{ $lang('common.currencySymbol') }}</text>
						<text class="ns-font-size-lg">{{ orderData.price }}</text>
					</text>
				</view>
			</view>
		</view>

		<view class="height-box"></view>

		<!-- <view class="order-operation" :class="{ 'bottom-safe-area': isIphoneX }" v-if="orderData.action.length > 0">
			<view class="order-box-btn white" v-if="orderData.is_evaluate == 1" @click="operation('memberOrderEvaluation')">
				<text v-if="orderData.evaluate_status == 0">评价</text>
				<text v-else-if="orderData.evaluate_status == 1">追评</text>
			</view>
			<view class="order-box-btn white" v-for="(operationItem, operationIndex) in orderData.action" :key="operationIndex" @click="operation(operationItem.action)">
				{{ operationItem.title }}
			</view>
		</view>
		<view class="order-operation" :class="{ 'bottom-safe-area': isIphoneX }" v-else-if="orderData.action.length == 0 && orderData.is_evaluate == 1">
			<view class="order-box-btn white" @click="operation('memberOrderEvaluation')">
				<text v-if="orderData.evaluate_status == 0">评价</text>
				<text v-else-if="orderData.evaluate_status == 1">追评</text>
			</view>
		</view> -->

		<loading-cover ref="loadingCover"></loading-cover>
		<ns-show-toast></ns-show-toast>
	</view>
</template>

<script>
import orderMethod from '../public/js/orderMethod.js';
import globalConfig from '@/common/js/golbalConfig.js';
import nsShowToast from '@/components/ns-show-toast/ns-show-toast.vue';

export default {
	components: {},
	mixins: [orderMethod, globalConfig],
	data() {
		return {
			isIphoneX: false,
			orderId: 0,
			orderData: {
				action: []
			},
			action: {
				icon: ''
			},
			storeDetail:{
				
			}
		};
	},
	components: {
		nsShowToast
	},
	onLoad(option) {
		if (option.order_id) this.orderId = option.order_id;
	},
	onShow() {
		// 刷新多语言
		this.$langConfig.refresh();

		this.isIphoneX = this.$util.uniappIsIPhoneX();

		if (uni.getStorageSync('token')) {
			this.getOrderData();
		} else {
			this.$util.redirectTo('/pages/login/login/login', { back: '/pages/order/detail/detail?order_id=' + this.orderId });
		}
	},
	methods: {
		goRefund(id){
			this.$util.redirectTo('/pages/order/refund/refund',{order_goods_id: id})
		},
		goRefundDetail(id){
			this.$util.redirectTo('/pages/order/refund_detail/refund_detail',{order_goods_id: id})
		},
		goDetail(id){
			this.$util.redirectTo('/promotionpages/point/detail/detail',{id:id})
		},
		navigateBack() {
			this.$util.goBack();
		},
		getOrderData() {
			this.$api.sendRequest({
				url: '/pointexchange/api/order/info',
				data: {
					order_id: this.orderId
				},
				success: res => {
					uni.stopPullDownRefresh();
					if (res.code >= 0) {
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
						this.orderData = res.data;
						this.storeDetail = res.data.delivery_store_info ? JSON.parse(res.data.delivery_store_info) : "";
					} else {
						this.$util.showToast({
							title: '未获取到订单信息!！',
							success: () => {
								setTimeout(() => {
									this.$util.redirectTo('/pages/order/list/list');
								}, 1500);
							}
						});
					}
				},
				fail: res => {
					uni.stopPullDownRefresh();
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				}
			});
		},
		/**
		 * 下拉刷新
		 */
		onPullDownRefresh() {
			this.getOrderData();
		},
		operation(action) {
			switch (action) {
				case 'orderPay': // 支付
					this.orderPay(this.orderData);
					break;
				case 'orderClose': //关闭
					this.orderClose(this.orderData.order_id, () => {
						this.getOrderData();
					});
					break;
				case 'memberTakeDelivery': //收货
					this.orderDelivery(this.orderData.order_id, () => {
						this.getOrderData();
					});
					break;
				case 'trace': //查看物流
					this.$util.redirectTo('/pages/order/logistics/logistics', { order_id: this.orderData.order_id });
					break;
				case 'memberOrderEvaluation': //评价
					this.$util.redirectTo('/pages/order/evaluate/evaluate', { order_id: this.orderData.order_id });
					break;
			}
		},
		imageError(index) {
			this.orderData.order_goods[index].sku_image = this.$util.getDefaultImage().default_goods_img;
			this.$forceUpdate();
		}
	},
	filters: {
		abs(value) {
			return Math.abs(parseFloat(value)).toFixed(2);
		}
	}
};
</script>

<style lang="scss">
@import '../public/css/detail.scss';
</style>
